import { Button, Divider, message, Popconfirm, Space, Typography } from 'antd';
import React, { useRef, useState } from 'react';
import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { TeamType } from '@/models/team';
import {
  applyAdoptTeam,
  applyNoAdoptTeam,
  deleteTeam,
  listQueryTeam,
} from '@/services/teamService';
import AdminUpdateTeam from './components/UpdateModal';
import AdminCreateModel from './components/CreateModal';

/***
 * 删除节点
 * @param params
 */
const doDelete = async (params: TeamType.TeamDeleteRequest) => {
  const hide = message.loading('正在删除');
  try {
    await deleteTeam({
      ...params,
    });
    message.success('删除成功');
  } catch (e: any) {
    message.error('删除失败' + e.message);
  } finally {
    hide();
  }
};

/***
 * 同意申请
 * @param params
 */
const ApplyAdopt = async (params: TeamType.TeamApplyAdoptRequest) => {
  const hide = message.loading('同意申请中');
  try {
    await applyAdoptTeam({
      ...params,
    });
    message.success('成功');
  } catch (e: any) {
    message.error('操作失败' + e.message);
  } finally {
    hide();
  }
};

/***
 * 拒绝申请
 * @param params
 */
const ApplyNoAdopt = async (params: TeamType.TeamApplyNoAdoptRequest) => {
  const hide = message.loading('拒绝中');
  try {
    await applyNoAdoptTeam({
      ...params,
    });
    message.success('已拒绝');
  } catch (e: any) {
    message.error('操作失败' + e.message);
  } finally {
    hide();
  }
};

/**
 * 用户管理页面
 */
const AdminUserPage: React.FC<unknown> = () => {
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  // const [model, setModel] = useState<TeamType.Team>();
  const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);
  const [updateData, setUpdateData] = useState<TeamType.Team>();
  const actionRef = useRef<ActionType>();
  /***
   * 表格列配置
   */
  const columns: ProColumns<TeamType.Team>[] = [
    {
      title: 'id',
      dataIndex: 'id',
      valueType: 'index',
    },
    {
      title: '队伍名称',
      dataIndex: 'teamName',
      valueType: 'text',
    },
    {
      title: '队伍图片',
      dataIndex: 'teamAvatarUrl',
      valueType: 'image',
    },
    {
      title: '队伍介绍',
      dataIndex: 'teamDescription',
      valueType: 'text',
    },
    {
      title: '队伍最大人数',
      dataIndex: 'maxNum',
      valueType: 'text',
    },
    {
      title: '队伍所属项目',
      dataIndex: 'teamType',
      valueType: 'text',
    },
    {
      title: '队伍使用的技术',
      dataIndex: 'teamTechnologyType',
      valueType: 'text',
    },
    {
      title: '创建者',
      dataIndex: 'userId',
      valueType: 'text',
    },
    {
      title: '审核状态',
      dataIndex: 'teamApplyState',
      valueType: 'text',
      valueEnum:{
        0: { text: '审核中' },
        1: { text: '通过' },
        2: { text: '拒绝' },
      }
    },
    {
      title: '审核反馈',
      dataIndex: 'teamApplyMessage',
      valueType: 'text',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space split={<Divider type="vertical" />}>
          <Typography.Link
            style={{ display: record?.teamApplyState === 0 ? 'block' : 'none' }}
            onClick={() =>
              ApplyAdopt({
                teamId: record.id,
              }).then(() => {
                actionRef?.current?.reload();
              })
            }
          >
            通过
          </Typography.Link>
          <Typography.Link
            style={{ display: record?.teamApplyState === 0 ? 'block' : 'none' }}
            onClick={() => {
              return ApplyNoAdopt({
                teamId: record.id,
              }).then(() => {
                actionRef?.current?.reload();
              });
            }}
          >
            拒绝
          </Typography.Link>
          <Typography.Link
            style={{ display: record?.teamApplyState === 0 ? 'none' : 'block' }}
            onClick={() => {
              setUpdateData(record);
              setUpdateModalVisible(true);
            }}
          >
            修改
          </Typography.Link>
          <Popconfirm
            title="您确定要删除么？"
            onConfirm={() =>
              doDelete({
                teamId: record.id,
              }).then(() => {
                actionRef?.current?.reload();
              })
            }
            okText="确认"
            cancelText="取消"
          >
            <Typography.Link
              style={{
                display: record?.teamApplyState === 0 ? 'none' : 'block',
              }}
              type="danger"
            >
              删除
            </Typography.Link>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // @ts-ignore
  // @ts-ignore
  // @ts-ignore
  return (
    <PageContainer>
      <ProTable<TeamType.Team>
        headerTitle="用户管理"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        toolBarRender={() => [
          <Button
            key="1"
            type="primary"
            onClick={() => setCreateModalVisible(true)}
          >
            新建
          </Button>,
        ]}
        request={async (params, sorter, filter) => {
          const { data, code } = await listQueryTeam({
            ...params,
            // @ts-ignore
            sorter,
            filter,
          });
          return {
            data: data.records || [],
            success: code === 0,
            total: data.total,
          } as any;
        }}
        columns={columns}
      />
      <AdminCreateModel
        modalVisible={createModalVisible}
        // @ts-ignore
        columns={columns}
        onSubmit={() => {}}
        onCancel={() => setCreateModalVisible(false)}
      />
      <AdminUpdateTeam
        // @ts-ignore
        oldData={updateData}
        modalVisible={updateModalVisible}
        columns={columns}
        onSubmit={() => {}}
        onCancel={() => setUpdateModalVisible(false)}
      />
    </PageContainer>
  );
};

export default AdminUserPage;
